<template>
	<div class="page_wrap">
		<div class="table_list">
			<!--<p>树形表格</p>-->
			<el-table :data="tableData" style="width: 100%; margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column prop="id" label="ID" align="center" width=""></el-table-column>
				<el-table-column prop="date" label="日期" align="center" width=""></el-table-column>
				<el-table-column prop="name" label="姓名" align="center" width=""></el-table-column>
				<el-table-column prop="address" label="地址" align="center" width=""></el-table-column>
				<el-table-column prop="" label="操作" align="center" width="">
					<template slot-scope="scope">
						<div class="btn-wrap">
							<el-button type="primary" size="mini" @click="clickFn(scope.row)">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
			}
		},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.tableData = [{
					id: 1,
					date: '2016-05-02',
					name: '王五',
					address: '上海市普陀区金沙江路 1518 弄',
					children: [{
						id: 31,
						date: '2016-05-01',
						name: '王五大儿子',
						address: '上海市普陀区金沙江路 1519 弄',
						children: [{
							id: 311,
							date: '2016-05-01',
							name: '王五大儿子的大儿子',
							address: '上海市普陀区金沙江路 1519 弄',
							children: [{
								id: 3111,
								date: '2016-05-01',
								name: '王五大儿子的大儿子的大儿子',
								address: '上海市普陀区金沙江路 1519 弄',
							}, {
								id: 3121,
								date: '2016-05-01',
								name: '王五大儿子的大儿子的二儿子',
								address: '上海市普陀区金沙江路 1519 弄'
							}]
						}, {
							id: 312,
							date: '2016-05-01',
							name: '王五大儿子的二儿子',
							address: '上海市普陀区金沙江路 1519 弄'
						}]
					}, {
						id: 32,
						date: '2016-05-01',
						name: '王五二儿子',
						address: '上海市普陀区金沙江路 1519 弄',
						children: [{
							id: 321,
							date: '2016-05-01',
							name: '王五二儿子的大儿子',
							address: '上海市普陀区金沙江路 1519 弄',
						}, {
							id: 322,
							date: '2016-05-01',
							name: '王五二儿子的二儿子',
							address: '上海市普陀区金沙江路 1519 弄'
						}]
					}]
				}, {
					id: 2,
					date: '2016-05-04',
					name: '李四',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					id: 3,
					date: '2016-05-01',
					name: '张三',
					address: '上海市普陀区金沙江路 1519 弄',
					children: [{
						id: 65,
						date: '2016-05-01',
						name: '张三儿子',
						address: '上海市普陀区金沙江路 1519 弄',
					}],
				}, {
					id: 4,
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					id: 5,
					date: '2016-05-03',
					name: '赵六',
					address: '上海市普陀区金沙江路 1516 弄'
				}]
			},
			clickFn(item) {
				console.log(item)
			},

		}
	};
</script>

<style lang="scss" scoped>
	@import '~assets/css/mixin';
	.page_wrap {
		background: #fff;
	}
</style>